<template>
  <div class="bg-white-box">
    <dc-header :title="'系统消息'" :page-to="goback || '/inform'"></dc-header>
    <div class="content-body">
    <div  class="head-top">
       <div class="info-header text-left">
         <dc-row type="flex" justify="space-between" align="middle">
           <dc-col span="4" >
             <img :src="info.groupLogo?info.groupLogo:'static/invite.png'" alt="">
           </dc-col>
           <dc-col span="20">
             <div class="ml15"> {{info.inviteName}}邀请你加入</div>
             <div class="f36 mt20">【{{info.groupName || '默认'}}】</div>
           </dc-col>
         </dc-row>
       </div>
      <div class="p20">
        <mt-cell title="企业名称" class="mint-cell no-border">
          <span> {{info.groupName || '默认'}}</span>
          <span slot="icon">
            <i class="iconfont icon-system-invite-enterprise sys-icon"></i>
          </span>
        </mt-cell>
        <mt-cell title="您的姓名" class="mint-cell">
          <span> {{info.yourName || '默认'}}</span>
          <span slot="icon">
            <i class="iconfont icon-system-invite-name sys-icon"></i>
          </span>
        </mt-cell>
        <mt-cell title="您的角色" class="mint-cell">
          <span> {{info.yourRoleName || '默认'}}</span>
          <span slot="icon">
            <i class="iconfont icon-system-invite-role sys-icon"></i>
          </span>
        </mt-cell>
      </div>
      <div class="pl50 pr50 mt50">
        <mt-button size="large" type="primary" @click="confirm">确认加入该企业</mt-button>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import {col, row} from '@/common/Flex';
  import api from '@/common/api/inform';
  import mintUi from '@/common/mintUi';

  export default {
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row
    },
    data () {
      return {
        id: this.$route.params.id,
        info: {},
        goback: ''
      };
    },
    mounted () {
      this.goback = '/risk/' + this.$route.query.type.type + '/' + this.$route.query.type.title;
      this.getDetail(this.id);
    },
    activated () {
      this.id = this.$route.params.id;
      this.getDetail(this.id);
    },
    methods: {
      getDetail (id) {
        api.inviteDetail(id).then(res => {
          this.info = res;
        });
      },
      confirm () {
        if (this.info.companyId) {
          api.joinCompany(this.info.companyId).then(res => {
            mintUi.openToast('加入企业成功');
            this.$router.push({path: '/risk/' + this.$route.query.type.type + '/' + this.$route.query.type.title});
          });
        } else {
          mintUi.openToast('该企业不存在');
        }
      }
    }
  }
  ;
</script>
<style lang="scss" scoped>
  @import "../../assets/css/variable";
  .info-header{
    padding: px2rem(60px) px2rem(30px);
    background-color: $theme-color;
    color: #fff;
    font-size: px2rem(32px);
    line-height: 1;
    img {
      width: px2rem(120px);
      height: px2rem(120px);
    }
  }
  .sys-icon {
    color: #6ACFDE;
    font-size: px2rem(48px);
    margin-right: px2rem(10px);
    vertical-align: middle;
  }
  .f36 {
    font-size: px2rem(36px);
  }
  .mint-cell {
    min-height: px2rem(160px);
  }
  .bg-white-box {
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #fff;
  }
</style>
